<!--  -->
<template>
	<div>
		<div :class="['time-item', classN, classN == 'column' && current == index ? 'column-active' : '']" v-for="(item, index) in data" :key="index">
			<div :class="['l', { nolast: index != data.length - 1 }]">
				<span class="time" v-if="classN == 'two-columns'">
					{{ timeHandle(item.time)[1] }}
					<br />
					{{ timeHandle(item.time)[0] }}
				</span>
				<span class="logo"></span>
			</div>
			<div class="r">
				<p class="info1">
					<span class="state">{{ item.state }}</span>
					<span class="time" v-if="classN == 'column'">{{ item.time }}</span>
				</p>
				<p class="info2">{{ item.info }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "timeLine",
	props: {
		data: {
			type: Array,
			default: () => [],
		},
		classN: {
			type: String,
			default: "column",
		},
		current: {
			type: Number,
		},
	},
	data() {
		return {}
	},

	components: {},

	computed: {
		timeHandle(data) {
			return function (data) {
				return data.split(" ")
			}
		},
	},

	methods: {},
}
</script>
<style lang="scss" scoped>
.two-columns {
	// margin: 40rpx 0 50rpx;
	display: flex;
	align-items: stretch;
	.l {
		padding-bottom: 40rpx;
		display: flex;
		align-items: flex-start;
		.time {
			margin-right: 20rpx;
			text-align: right;
			width: 130rpx;
			color: #777;
			font-size: 24rpx;
		}
		.logo {
			display: block;
			width: 36rpx;
			height: 36rpx;
			background: #ecf0ff;
			border-radius: 50%;
			position: relative;
			&::after {
				content: "";
				width: 18rpx;
				height: 18rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: #466aff;
				border-radius: 50%;
			}
		}
	}
	.nolast {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			top: 36rpx;
			right: 16rpx;
			width: 4rpx;
			height: 100%;
			background: url("@/static/common/line.png") repeat;
			z-index: -1;
		}
	}
	.r {
		padding-bottom: 40rpx;
		padding-left: 20rpx;
		flex: 1;
		color: #666;
	}
}
.column {
	margin: 30rpx 0 40rpx;
	display: flex;
	align-items: flex-start;
	.l {
		padding: 10rpx 20rpx;
		.logo {
			display: block;
			width: 20rpx;
			height: 20rpx;
			background: #e5e5e5;
			border-radius: 50%;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 10rpx;
				height: 10rpx;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background: #fff;
			}
		}
	}
	.r {
		.info1 {
			margin-bottom: 10rpx;
			line-height: 1;
			color: #999;
			.state {
				margin-right: 15rpx;
				font-weight: bold;
			}
			.time {
				font-size: 20rpx;
			}
		}
		.info2 {
			color: #999;
			line-height: 1.5;
		}
	}
}
.column-active {
	.l {
		.logo {
			background: $theme-color;
		}
	}
	.r {
		.info1 {
			.state {
				color: $theme-color;
			}
			.time {
				color: $theme-color;
			}
		}
		.info2 {
			color: #333;
		}
	}
}
</style>
